//组件通用
const global = {
    props: ['data', 'id', 'layer'],
    computed: {
        SortableSwitch() {//是否开启拖拽
            return this.$store.state.SortableSwitch
        },
        layerBorder() {//是否开启拖拽
            return this.layer && this.SortableSwitch ? '1px solid #67C23A' : ''
        },
        width() {//宽度
            return this.data.width + this.data.widthUnit
        },
        height() {//高度
            return this.data.height + this.data.heightUnit
        },
        Left() {//左边距
            return this.data.left + this.data.leftUnit
        },
        Right() {//右边距
            return this.data.right + this.data.rightUnit
        },
        Top() {//上边距
            return this.data.top + this.data.topUnit
        },
        Bottom() {//下边距
            return this.data.bottom + this.data.bottomUnit
        },
        Radius() {//角度
            return this.data.radius + 'px'
        },
        fontSize() {//字体大小
            return this.data.fontSize + this.data.fontSizeUnit
        },
        fontWeight() {//字体粗细
            return this.data.fontWeight
        },
        textAlign() {//文字所在位置
            return this.data.textAlign
        },
        color() {//字体颜色
            return this.data.color
        },
        backgroundColor() {//背景颜色
            return this.data.backgroundColor
        },
        minHeight() {//最小高度
            return this.data.minHeight + this.data.minHeightUnit
        },
        borderTop() {//上边框
            return `${this.data.borderTopWidth}${this.data.borderTopWidthUnit} ${this.data.borderTopStyle} ${this.data.borderTopColor}`
        },
        borderBottom() {//下边框
            return `${this.data.borderBottomWidth}${this.data.borderBottomWidthUnit} ${this.data.borderBottomStyle} ${this.data.borderBottomColor}`
        },
        borderLeft() {//左边框
            return `${this.data.borderLeftWidth}${this.data.borderLeftWidthUnit} ${this.data.borderLeftStyle} ${this.data.borderLeftColor}`
        },
        borderRight() {//右边框
            return `${this.data.borderRightWidth}${this.data.borderRightWidthUnit} ${this.data.borderRightStyle} ${this.data.borderRightColor}`
        }
    }
}
//组件配置通用
const globalConfig = {
    props: ['data', 'id'],
    store,//仓库
    computed: {
        SelectElement() {
            return this.$store.state.SelectElement
        },
        unit() {
            return this.$store.state.unit
        },
        fit() {
            return this.$store.state.fit
        },
        size() {
            return this.$store.state.size
        },
        predefineColors() {
            return this.$store.state.predefineColors
        }
    }
}
//拖拽配置
const drag = {
    data() {
        return {
            isSwitch: false,
            Sortable: null,
        }
    },
    watch: {
        isSwitch(val) {
            this.Sortable.option('disabled', !val);
        }
    },
    methods: {
        sortable(that, container, element, jsonarray, callback) {
            var $ul = that.$el.querySelector(container)
            $ul.addEventListener('selectstart', function (e) {
                e.preventDefault();
            })
            this.Sortable = Sortable.create($ul, {
                handle: element,
                draggable: element,
                animation: 150,
                onUpdate: (event) => {
                    let newIndex = event.newIndex, oldIndex = event.oldIndex;
                    $li = $ul.children[newIndex],
                        $oldLi = $ul.children[oldIndex]
                    //先删除移动的节点, 再插入移动的节点到原有节点，还原了移动的操作
                    $ul.removeChild($li)
                    if (newIndex > oldIndex) {
                        $ul.insertBefore($li, $oldLi)
                    } else {
                        $ul.insertBefore($li, $oldLi.nextSibling)
                    }
                    //通过改变vue遍历数组移动节点
                    let item = jsonarray[oldIndex];
                    jsonarray.splice(oldIndex, 1);
                    jsonarray.splice(newIndex, 0, item);
                    if (callback) callback(newIndex, oldIndex);
                }
            })
            this.Sortable.option('disabled', true);
        }
    }
}
const request = {//请求封装
    data() {
        return {

        }
    },
    methods: {
        //将对象转化为url参数
        parame(query) {
            let parame = "";
            for (let key in query) {
                if (parame) {
                    parame += "&" + key + "=" + query[key]
                } else {
                    parame = "?" + key + "=" + query[key]
                }
            }
            return parame;
        },
        request(Header, BASE_URL, Method = 'GET', Query = {}, Body) {
            function name({ success, error, complete }) {
                $.ajax({
                    headers: Header,
                    url: BASE_URL + this.parame(Query),
                    type: Method,
                    data: Body,
                    success: function (res) {
                        success(res);
                    },
                    error: function () {
                        error();
                    },
                    complete: function (XMLHttpRequest) {
                        complete(XMLHttpRequest);
                    }
                })
            }
            name(()=>{
                
            })
        },
        a(){
            this.request("","","",{},{},{
                success:()=>{
                    
                },
                error:()=>{

                },
                complete:()=>{

                }
            })
        }
    },
}